<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Login</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png"/>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/animate.min.css">
	<link rel="stylesheet" href="css/jquery-ui.css">
	<link rel="stylesheet" href="css/slick.css">
	<link rel="stylesheet" href="css/chosen.min.css">
	<link rel="stylesheet" href="css/pe-icon-7-stroke.css">
	<link rel="stylesheet" href="css/magnific-popup.min.css">
	<link rel="stylesheet" href="css/lightbox.min.css">
	<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css">
	<link rel="stylesheet" href="css/jquery.scrollbar.min.css">
	<link rel="stylesheet" href="css/mobile-menu.css">
	<link rel="stylesheet" href="fonts/flaticon/flaticon.css">
	<link rel="stylesheet" href="css/style.css">
	<link href="layui/css/layui.css">
	
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/jquery.plugin-countdown.min.js"></script>
	<script src="js/jquery-countdown.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/magnific-popup.min.js"></script>
	<script src="js/isotope.min.js"></script>
	<script src="js/jquery.scrollbar.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/mobile-menu.js"></script>
	<script src="js/chosen.min.js"></script>
	<script src="js/slick.js"></script>
	<script src="js/jquery.elevateZoom.min.js"></script>
	<script src="js/jquery.actual.min.js"></script>
	<script src="js/fancybox/source/jquery.fancybox.js"></script>
	<script src="js/lightbox.min.js"></script>
	<script src="js/owl.thumbs.min.js"></script>
	<script src="js/jquery.scrollbar.min.js"></script>
	<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
	<script src="js/frontend-plugin.js"></script>
	<script src="layui/layui.js"></script>
</head>
<body class="inblog-page">

<!-- 引入头部导航栏 -->
	<jsp:include page="top.jsp"></jsp:include>
	
	<div class="main-content main-content-login">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="breadcrumb-trail breadcrumbs">
						<ul class="trail-items breadcrumb">
							<li class="trail-item trail-begin">
								
							</li>
							<li class="trail-item trail-end active">
								<a href="index.jsp">认证</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="content-area col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="site-main">
						<h3 class="custom_blog_title">
							认证
						</h3>
						<div class="customer_login">
							<div class="row">
								<div class="col-lg-6 col-md-6 col-sm-12">
									<div class="login-item">
										<h5 class="title-login">登录您的帐户</h5>
										<form class="login" id="login" onsubmit="return false;">
											<div class="social-account">
												<h6 class="title-social">使用社交帐户快速登录</h6>
												<a href="#" class="mxh-item facebook">
													<i class="icon fa fa-facebook-square" aria-hidden="true"></i>
													<span class="text">QQ</span>
												</a>
												<a href="#" class="mxh-item twitter">
													<i class="icon fa fa-twitter" aria-hidden="true"></i>
													<span class="text">微信</span>
												</a>
											</div>
											<p class="form-row form-row-wide">
												<label class="text">用户名/手机号/邮箱</label>
												<input title="username" name="vName" type="text" id="vName" class="input-text">
											</p>
											<p class="form-row form-row-wide">
												<label class="text">密码</label>
												<input title="password" type="password" name="vPassword" id="vPassword" class="input-text">
											</p>
											<p class="lost_password">
												<span class="inline">
													<input type="checkbox" id="cb1">
													<label for="cb1" class="label-text">记住我</label>
												</span>
												<a href="#" class="forgot-pw">忘记密码?</a>
											</p>
											<p class="form-row">
											<button type="button" onclick="getVip()"  >登录</button>
											</p>
										</form>
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-12">
									<div class="login-item">
										<h5 class="title-login">立即注册</h5>
										<form class="register" onsubmit="return false;" id="register" name="register">
											<p class="form-row form-row-wide">
												<label class="text">你的电子邮箱</label>
												<input title="电子邮箱" type="email" name="email" id="email" class="input-text">
											</p>
											<p class="form-row form-row-wide">
												<label class="text">电话</label>
												<input title="电话" name="vPhone" type="text" id="phone" class="input-text">
											</p>
											<p class="form-row form-row-wide">
												<label class="text">用户名</label>
												<input title="用户名" type="text" name="vName" id=name class="input-text">
											</p>
											<p class="form-row form-row-wide">
												<label class="text">密码</label>
												<input title="用户名" type="password" name="vPassword" id="password" class="input-text">
												</p>
											<div class="layui-input-block">
												<button type="button" class="layui-btn" id="upload">
													<i class="layui-icon">&#xe67c;</i>上传图片
												</button>
											</div>
											<div class="layui-input-block" style="margin-top: 20px;">
												<img id="imgFace" style="width: 120px" src="" /><br />
												 <input type="hidden" name="vImg" id="picName" class="layui-input" />
											</div>

											<p class="form-row form-row-wide">
												<label class="text">生日</label>
												<input title="生日" type="date" name="brithday" class="input-text">
											</p>
											<p class="form-row">
												<button class="button-submit" onclick="addVip()" >立即注册</button>
											</p>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- 引入页脚栏 -->
	<jsp:include page="footer.jsp"></jsp:include>	
	
<script src="layui/layui.js"></script>
	<script>
	var layer;
layui.use(['upload','form','layer'], function(){
  var upload = layui.upload;
  var form = layui.form;
  layer = layui.layer;
//上传图片
	 var uploadInst = upload.render({
			elem : '#upload', //绑定元素
			url : 'http://localhost:8080/Greenleaf/uploadImage/upload',
			done : function(res) {
				if (res.success) {
					//把返回的图片名，放到img标记的src里面
					$("#imgFace").attr("src",
							"images/" + res.remark);
					//把返回的图片名，保存在隐藏域里面
					$("#picName").val("images/"+res.remark);
					layer.msg('新图片上传成功', {
						icon : 6,
						time : 1500
					});
				}
			},
			error : function() {
				layer.msg("图片上传失败");
			}
		});
});
function addVip(){
	var name = $("#name").val();//获取账户
	var phone = $("#phone").val();//获取手机号
	var email = $("#email").val();//获取邮箱
	var password = $("#password").val();//获取密码
	if( name  == "") {
		layer.msg("用户名不能为空！",{icon:2,time:1000});
		return false;
	}
	if (password == "") {
		layer.msg("密码不能为空",{icon:2,time:1000});
		return false;
	}
	if (phone == ""&&email=="") {
		layer.msg("手机号和邮箱请任选其一填写",{icon:2,time:1000});
		return false;
	}
	$.post('http://localhost:8080/Greenleaf/vip/add',//注册
					$("#register").serialize(),function(res){
				if (res) {
					var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
			        setTimeout(function(){
			            top.layer.close(index);
						top.layer.msg("注册成功！");
			 			layer.closeAll("iframe");
				 		parent.location.reload();
			        },1000);
				}else{
					var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
			        setTimeout(function(){
			            top.layer.close(index);
						top.layer.msg("注册失败！");
			 			
			        },1000);
				}
			},"text"
	)
}
function getVip(){
	var name = $("#vName").val();//获取账户
	var phone = $("#vPassword").val();//获取手机号
	if( name  == "") {
		layer.msg("用户名不能为空！",{icon:2,time:1000});
		return false;
	}
	if (password == "") {
		layer.msg("密码不能为空",{icon:2,time:1000});
		return false;
	}
	$.post('http://localhost:8080/Greenleaf/vip/login',//登录
					$("#login").serialize(),function(res){
				if (res=='true') {
					var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
			        setTimeout(function(){
						top.layer.msg("登录成功！");
						window.location.href="index.jsp";
			        },1000);
				}else{
					var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
			        setTimeout(function(){
						top.layer.msg("登录失败请检查账号或密码！");
			        },1000);
				}
			},"text"
	)
}
</script>
</body>
</html>